<!-- <d-accordion [data]="ui.entitielist" class="menu" [restrictOneOpen]="restrictOneOpen" (itemClick)="itemClick($event)"
    (menuToggle)="menuToggle($event)" (activeItemChange)="log($event)"
    [accordionType]="accordionTypeEmbed ? 'embed' : 'normal'" [innerListTemplate]="innerListTemplate">

</d-accordion>

<ng-template #innerListTemplate let-item="item">
    <div class="devui-accordion-submenu my-menu">
        {{ item.Name }}
    </div>
</ng-template> -->
<div>
    <d-panel [type]="'primary'" #panel [isCollapsed]="ui.isCollapsed('Actor')" [showAnimation]="true">
        <d-panel-header (click)="active('Story')">
            故事实体/StoryEntity
            <em class="icon icon-chevron-down" [ngClass]="{ open: panel.isCollapsed }"></em>
        </d-panel-header>
        <d-panel-body>
            <div>
                <d-panel [type]="'primary'" #panel [isCollapsed]="ui.isCollapsed('Actor')" [showAnimation]="true">
                    <d-panel-header (click)="active('Actor')">
                        角色/Actors
                        <em class="icon icon-chevron-down" [ngClass]="{ open: panel.isCollapsed }"></em>
                    </d-panel-header>
                    <d-panel-body>
                        <div class="listitem" *ngFor="let item of store.currentStory.Actors"
                            (click)="select(item,'actorinfo')" dDraggable
                            [dragData]="{ item: item, parent: store.currentStory.Actors }">
                            {{item.Name}}
                        </div>
                    </d-panel-body>
                </d-panel>
                <d-panel [type]="'primary'" #panel [isCollapsed]="ui.isCollapsed('Clue')" [showAnimation]="true">
                    <d-panel-header (click)="active('Clue')">
                        线索/Clues
                        <em class="icon icon-chevron-down" [ngClass]="{ open: panel.isCollapsed }"></em>
                    </d-panel-header>
                    <d-panel-body>
                        <div class="listitem" *ngFor="let item of store.currentStory.Clues"
                            (click)="select(item,'clueinfo')">
                            {{item.Name}}
                        </div>
                    </d-panel-body>
                </d-panel>
                <d-panel [type]="'primary'" #panel [isCollapsed]="ui.isCollapsed('Event')" [showAnimation]="true">
                    <d-panel-header (click)="active('Event')">
                        事件/Events
                        <em class="icon icon-chevron-down" [ngClass]="{ open: panel.isCollapsed }"></em>
                    </d-panel-header>
                    <d-panel-body>
                        <div class="listitem" *ngFor="let item of store.currentStory.Events"
                            (click)="select(item,'eventinfo')">
                            {{item.Name}}
                        </div>
                    </d-panel-body>
                </d-panel>
                <d-panel [type]="'primary'" #panel [isCollapsed]="ui.isCollapsed('Group')" [showAnimation]="true">
                    <d-panel-header (click)="active('Group')">
                        组织/Groups
                        <em class="icon icon-chevron-down" [ngClass]="{ open: panel.isCollapsed }"></em>
                    </d-panel-header>
                    <d-panel-body>
                        <div class="listitem" *ngFor="let item of store.currentStory.Groups"
                            (click)="select(item,'groupinfo')">
                            {{item.Name}}
                        </div>
                    </d-panel-body>
                </d-panel>
                <d-panel [type]="'primary'" #panel [isCollapsed]="ui.isCollapsed('Location')" [showAnimation]="true">
                    <d-panel-header (click)="active('Location')">
                        地点/Locations
                        <em class="icon icon-chevron-down" [ngClass]="{ open: panel.isCollapsed }"></em>
                    </d-panel-header>
                    <d-panel-body>
                        <div class="listitem" *ngFor="let item of store.currentStory.Locations"
                            (click)="select(item,'locationinfo')">
                            {{item.Name}}
                        </div>
                    </d-panel-body>
                </d-panel>
                <d-panel [type]="'primary'" #panel [isCollapsed]="ui.isCollapsed('Stuff')" [showAnimation]="true">
                    <d-panel-header (click)="active('Stuff')">
                        物品/Stuffs
                        <em class="icon icon-chevron-down" [ngClass]="{ open: panel.isCollapsed }"></em>
                    </d-panel-header>
                    <d-panel-body>
                        <div class="listitem" *ngFor="let item of store.currentStory.Stuffs"
                            (click)="select(item,'stuffinfo')">
                            {{item.Name}}
                        </div>
                    </d-panel-body>
                </d-panel>
                <d-panel [type]="'primary'" #panel [isCollapsed]="ui.isCollapsed('Task')" [showAnimation]="true">
                    <d-panel-header (click)="active('Task')">
                        任务/Tasks
                        <em class="icon icon-chevron-down" [ngClass]="{ open: panel.isCollapsed }"></em>
                    </d-panel-header>
                    <d-panel-body>
                        <div class="listitem" *ngFor="let item of store.currentStory.Tasks"
                            (click)="select(item,'taskinfo')">
                            {{item.Name}}
                        </div>
                    </d-panel-body>
                </d-panel>
            </div>
        </d-panel-body>
    </d-panel>

    <d-panel [type]="'primary'" #panel [isCollapsed]="ui.isCollapsed('Panorama')" [showAnimation]="true">
        <d-panel-header (click)="active('Panorama')">
            全景图/Panorama
            <em class="icon icon-chevron-down" [ngClass]="{ open: panel.isCollapsed }"></em>
        </d-panel-header>
        <d-panel-body>
            <div class="listitem" *ngFor="let item of store.currentStory.Panoramas" (click)="select(item,'panorama')">
                {{item.Name}}
            </div>
        </d-panel-body>
    </d-panel>
    <d-panel [type]="'primary'" #panel [isCollapsed]="ui.isCollapsed('Express')" [showAnimation]="true">
        <d-panel-header (click)="active('Express')">
            表达/Express
            <em class="icon icon-chevron-down" [ngClass]="{ open: panel.isCollapsed }"></em>
        </d-panel-header>
        <d-panel-body>
            <div class="listitem" *ngFor="let item of store.currentStory.Expresses" (click)="select(item,'express')">
                {{item.Name}}
            </div>
        </d-panel-body>
    </d-panel>
</div>